import React from 'react';
import { Modal, Form, Input, Select } from 'antd';
import { BaseForm } from '../Form/BaseForm';
import type { Member, CreateMemberRequest } from '../../../store/slices/memberSlice';

const { Option } = Select;

interface UserFormValues {
  name: string;
  department: string;
  email: string;
  phone: string;
  status: 'active' | 'inactive';
}

interface MemberModalProps {
  visible: boolean;
  editingMember: Member | null;
  onSubmit: (values: UserFormValues) => Promise<void>;
  onCancel: () => void;
  loading?: boolean;
}

export const MemberModal: React.FC<MemberModalProps> = ({
  visible,
  editingMember,
  onSubmit,
  onCancel,
  loading = false,
}) => {
  const [form] = Form.useForm();

  // 当弹窗显示或编辑用户变化时，重置表单
  React.useEffect(() => {
    if (visible) {
      if (editingMember) {
        form.setFieldsValue({
          name: editingMember.name,
          department: editingMember.department,
          email: editingMember.email,
          phone: editingMember.phone,
          status: editingMember.status,
        });
      } else {
        form.resetFields();
        form.setFieldsValue({
          status: 'active'
        });
      }
    }
  }, [visible, editingMember, form]);

  const handleSubmit = async (values: UserFormValues) => {
    try {
      await onSubmit(values);
      form.resetFields();
    } catch (error) {
      // 错误处理在父组件中已经完成，这里不需要额外处理
      throw error;
    }
  };

  const handleCancel = () => {
    form.resetFields();
    onCancel();
  };

  return (
    <Modal
      title={editingMember ? '编辑用户' : '新增用户'}
      open={visible}
      onCancel={handleCancel}
      footer={null}
      width={600}
      destroyOnClose
      forceRender
    >
      <BaseForm
        form={form}
        onFinish={handleSubmit}
        onCancel={handleCancel}
        submitText={editingMember ? '更新' : '创建'}
        cancelText="取消"
        layout="vertical"
        loading={loading}
        initialValues={{
          status: 'active'
        }}
      >
        <Form.Item
          label="姓名"
          name="name"
          rules={[
            { required: true, message: '请输入用户姓名' },
            { min: 2, max: 20, message: '姓名长度为2-20个字符' }
          ]}
        >
          <Input placeholder="请输入用户姓名" />
        </Form.Item>

        <Form.Item
          label="部门"
          name="department"
          rules={[
            { required: true, message: '请输入部门' },
            { min: 2, max: 50, message: '部门长度为2-50个字符' }
          ]}
        >
          <Input placeholder="请输入部门" />
        </Form.Item>

        <Form.Item
          label="邮箱"
          name="email"
          rules={[
            { required: true, message: '请输入邮箱' },
            { type: 'email', message: '邮箱格式不正确' }
          ]}
        >
          <Input placeholder="请输入邮箱" />
        </Form.Item>

        <Form.Item
          label="电话"
          name="phone"
          rules={[
            { required: true, message: '请输入电话' },
            { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码' }
          ]}
        >
          <Input placeholder="请输入手机号码" />
        </Form.Item>

        <Form.Item
          label="状态"
          name="status"
          rules={[{ required: true, message: '请选择状态' }]}
        >
          <Select placeholder="请选择状态">
            <Option value="active">活跃</Option>
            <Option value="inactive">禁用</Option>
          </Select>
        </Form.Item>
      </BaseForm>
    </Modal>
  );
};